<template>
  <van-nav-bar title="我的拼团订单" left-text="" left-arrow @click-left="goBack" />
  <van-tabs v-model:active="status" @click-tab="getOrderData">
    <van-tab
      v-for="item in statuslist"
      :key="item.id"
      :title="item.name"
      :name="item.id"
    ></van-tab>
  </van-tabs>
  <!-- 商品信息 -->
  <van-card
    v-for="item in orderlist"
    :key="item.id"
    :num="item.nums"
    :tag="item.order.status_text"
    :thumb="item.info.thumbs_text"
  >
    <template #tags>
      <div style="font-size: 14px; font-weight: bold">
        下单时间: {{ item.createtime }}
      </div>
    </template>
    <template #desc>
      <div v-if="item.attrs">
        <van-tag
          size="medium"
          type="warning"
          v-for="child in item.attrs"
          style="margin-right: 10px"
          >{{ child.value }}
        </van-tag>
      </div>
      <div v-else>
        <van-tag size="medium" type="danger">无商品规格</van-tag>
      </div>
    </template>
    <template #title>
      <div style="font-size: 14px; font-weight: bold">
        订单号: {{ item.order.code }}
      </div>
    </template>
    <template #price>
      <div style="font-size: 14px; font-weight: bold">
        订单总价: ￥{{ item.order.amount }}
      </div>
    </template>
    <template #footer>
      <van-button
        type="primary"
        size="small"
        @click="toPage(item, '/order/info')"
        >订单详情</van-button
      >
      <van-button
        type="danger"
        size="small"
        v-if="item.order.status > 0 && item.order.status != 4"
        @click="toPage(item, '/order/refund')"
        >申请退款</van-button
      >
      <van-button
        type="success"
        size="small"
        v-if="item.order.status == 2"
        @click="toPage(item)"
        >确认收货</van-button
      >
      <van-button type="warning" size="small" v-if="item.order.status == 4"
        >评价详情</van-button
      >
      <van-button type="danger" size="small" v-if="item.order.status < 0"
      @click="toPage(item, '/order/refundinfo')"
        >退货详情</van-button
      >
      <van-button type="danger" size="small" v-if="item.order.status == '-3' && item.depot_text" @click="toPage(item, '/order/refundgoods')"
        >待退货</van-button
      >
      <van-button type="warning" size="small" v-if="item.expresscode" @click="toPage(item, '/order/express')"
        >物流详情</van-button
      >
    </template>
  </van-card>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/business/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
// 订单状态
const statuslist = [
  {
    id: 0,
    name: '全部'
  },
  {
    id: 1,
    name: '已支付'
  },
  {
    id: 2,
    name: '已发货'
  },
  {
    id: 3,
    name: '已收货'
  },
  {
    id: 4,
    name: '已完成'
  },
  {
    id: -1,
    name: '售后'
  },
]
const status = ref(0)
const orderlist = ref([])

onBeforeMount(() => {
  getOrderData()
})
const getOrderData = async () => {
  let result = await Api.TeamOrder({busid: LoginUser.id})
  if (result.code == 1) {
    console.log(result.data);
    result.data.forEach(item => {
      if (item.attrs) {
        item.attrs = JSON.parse(item.attrs)
      }
    })
    orderlist.value = result.data;
  }
}

const toPage = async (item, url) => {
  if (url){
    proxy.$router.push({
      path: url,
      query:{
        orderid: item.id
      }
    })
  }else{
    let result = await Api.OrderConfirm({ busid: LoginUser.id, orderid: item.id})
    if (result.code == 1) {
        getOrderData()
    }
  }
}
</script>

<style>
.van-card__content {
  text-align: left;
}
</style>